<!--
 * @Author       : GaoFeiXiang
 * @Date         : 2023-06-22 18:50:42
 * @Description  : 预排订单
 * @FilePath     : /aps-admin/src/views/pre-order/index.vue
-->
<template>
  <div class="pre-order">
    <el-card>
      <el-row class="rows1" type="flex" justify="space-between">
        <el-col :span="20">
          <el-form class="searchForm" :model="searchForm" inline size="mini">
            <el-form-item label="">
              <el-select v-model="searchForm.status" placeholder="工厂选择">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="searchForm.num"
                placeholder="订单编号"
              />
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="searchForm.num"
                placeholder="外协合同号"
              />
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="searchForm.num"
                placeholder="排产流水号"
              />
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="searchForm.status" placeholder="产品类别">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="searchForm.status" placeholder="业务员">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
            <div v-if="expand">
              <el-form-item label="">
                <el-select v-model="searchForm.status" placeholder="业务部门">
                  <el-option label="" value="" />
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-date-picker
                  v-model="searchForm.time"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
              <el-form-item label="">
                <el-select v-model="searchForm.status" placeholder="交期范围">
                  <el-option label="" value="" />
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="searchForm.num"
                  placeholder="输入排产量"
                />
              </el-form-item>
              <el-form-item label="">
                <el-select v-model="searchForm.status" placeholder="排产状态">
                  <el-option label="" value="" />
                </el-select>
              </el-form-item>
            </div>
          </el-form>
        </el-col>
        <el-col :span="4" class="rows1-col1">
          <div
            style="cursor: pointer; display: inline-block"
            @click="expand = !expand"
          >
            <span class="expand">{{ expand ? "收起" : "展开" }}</span>
            <i v-if="!expand" class="expand el-icon-arrow-down" />
            <i v-else class="expand el-icon-arrow-up" />
          </div>
          <el-button type="primary" size="mini">查询</el-button>
          <el-button type="" size="mini">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-row class="select-rows" type="flex" justify="space-between">
      <el-col :span="20">
        <span class="select">已选1项</span>
        <el-button type="primary" plain size="small">
          <img class="icons" src="@/assets/imgs/export.png" alt="">
          导出报表
        </el-button>
        <el-button type="primary" plain size="small"> 排产 </el-button>
      </el-col>
      <el-col :span="4" style="text-align: right">
        <el-button type="primary" plain>月计划调整</el-button>
        <el-button type="primary" plain>倒序排产</el-button>
      </el-col>
    </el-row>
    <el-card>
      <second-table-list
        :total="total"
        :page-size="page.pageSize"
        :current="page.page"
        @changePage="changePage"
      >
        <my-table
          id="0"
          slot="table"
          :columns="columns"
          :data="tdata"
          :show-selection="true"
          :show-column-setting="true"
          @selectChange="selectChange"
        >
          <template slot="table-title">
            <div class="table-title">
              <h1>订单列表</h1>
            </div>
          </template>
          <template v-slot:action="{ row }">
            <el-button type="text">编辑</el-button>
            <el-button
              type="text"
              @click="
                $router.push({ name: 'monthlyPlanEdit', query: { id: row.id } })
              "
            >详情</el-button>
            <el-button type="text">重新排产</el-button>
          </template>
        </my-table>
      </second-table-list>
    </el-card>
  </div>
</template>

<script>
import columnSetting from '../../components/table/columnSetting.vue'
import myTable from '../../components/table/myTable.vue'
import secondTableList from '@/components/table/secondTableList'
export default {
  components: { columnSetting, myTable, secondTableList },
  data() {
    return {
      searchForm: {},
      expand: false,
      header: false,
      tableTail: true,
      total: 0,
      page: {
        page: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '排产流水号',
          prop: 'num',
          fixed: true
        },
        {
          label: '订单编号',
          prop: 'name'
        },
        {
          label: '外协合同号',
          prop: 'name'
        },
        {
          label: '产品大类',
          prop: 'name'
        },
        {
          label: '优先级',
          prop: 'name'
        },
        {
          label: '业务员',
          prop: 'name'
        },
        {
          label: '业务部门',
          prop: 'name'
        },
        {
          label: '产品信息',
          prop: 'name'
        },
        {
          label: '批次',
          prop: 'name'
        },
        {
          label: '订单需求量',
          prop: 'name'
        },
        {
          label: '批次需求量',
          prop: 'name'
        },
        {
          label: '交期',
          prop: 'name'
        },
        {
          label: '最早上线时间',
          prop: 'name',
          sortable: true
        },
        {
          label: '最早上线时间',
          prop: 'name',
          sortable: true
        },
        {
          label: '最晚上线时间',
          prop: 'name',
          sortable: true
        },
        {
          label: '最早下线时间',
          prop: 'name',
          sortable: true
        },
        {
          label: '最晚下线时间',
          prop: 'name',
          sortable: true
        },
        {
          label: '总时差(天)',
          prop: 'name'
        },
        {
          label: '可生产时间(h)',
          prop: 'clerk'
        },
        {
          label: '加班时间(h)',
          prop: 'product'
        },
        {
          label: '瓶颈工序',
          prop: 'secondaryClassification'
        },
        {
          label: '本厂可产量',
          prop: 'productName'
        },
        {
          label: '实际排产',
          prop: 'customerDemand'
        },
        {
          label: '流转数量(件)',
          prop: 'customerDemand'
        },
        {
          label: '流转次数(次)',
          prop: 'customerDemand'
        },

        {
          label: '单次流转制成时间(s)',
          prop: 'customerDemand'
        },
        {
          label: '订单制成周期(s)',
          prop: 'customerDemand'
        },
        {
          label: '订单制成天数',
          prop: 'customerDemand'
        },
        {
          label: '更新日期',
          prop: 'customerDemand'
        },

        {
          label: '排产状态',
          prop: 'status'
        },
        {
          label: '操作',
          prop: 'action',
          fixed: 'right',
          width: '300',
          slot: 'action'
        }
      ],
      tdata: [],
      selectChangeList: [],
      show: false
    }
  },
  created() {},
  mounted() {},
  methods: {
    changePage(val) {
      this.page = val
    },
    selectChange(val) {
      console.log(val)
      this.selectChangeList = val
    },
    columnChange(val) {
      this.columnsSetting = val
    }
  }
}
</script>

<style scoped lang="scss">
.pre-order {
  width: 100%;
  .searchForm {
  }
  .rows1 {
    align-items: flex-end;
    .rows1-col1 {
      margin-bottom: 18px;
    }
  }

  .expand {
    margin-right: 10px;
    color: #8fa1c9;
  }
  .select-rows {
    margin: 20px 0;
    .select {
      margin-right: 15px;
    }
  }
}
.table-title {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  h1 {
    font-size: 20px;
  }
  .right {
    span {
      font-size: 14px;
      color: #8fa1c9;
      margin-right: 10px;
    }
    .el-switch {
      margin-right: 20px;
    }
  }
}
.icons {
  vertical-align: middle;
}
</style>
